let name = 'Tom';
let age = 18;
let arr1 = ['唱','跳','rap','打篮球'];
let obj1 = {
  name: '马保国',
  age: 70,
  title: '形意八卦掌门人',
  hasWude: false
}
// 声明class的值
let class1 = 'p1';
let df = 'LOLm';
let size1 = '80px';
let style1 = {
  color: 'red'
}

<header className="App-header">
{/* <ComA></ComA> */}
{/* <ComB></ComB> */}
{/* <ComC></ComC> */}
{/* <ComD name="剑圣" skill="QWERDF"></ComD> */}
{/* <LOLm></LOLm> */}
{/* <Big></Big> */}
{/* <From></From> */}
{/* <Father></Father> */}
{/* <Hoc></Hoc> */}
{/* <Comment></Comment> */}
{/* <CSSTransition></CSSTransition> */}
{/* <Csstransition2></Csstransition2> */}
<Csstransition3></Csstransition3>
<img src={logo} className="App-logo" alt="logo" />
<p>
 JSX的语法：
 1.允许js和html混写，{}表示是js的代码，尖括号表示是html的代码;
 2.class在html中要写成className，class是js中的保留字;
 3.style是两个花括号，一个表示js一个表示格式是对象
</p>
{/* 修改标签内容 */}
<p>name:{name}</p>
<p>age:{age}</p>
<p>{arr1.length}</p>
<p>{obj1.age}</p>
<p style={style1}>{obj1.hasWude?'':'不'}讲武德</p>
<p className={class1} style={{fontSize: size1}}>修改标签属性</p>
<input type={'file'} qwer={df} />
{/* 循环渲染 */}
{
  arr1.map((item, index) => {
    return <button key={index}>{item}</button>
  })
}
{/* 条件渲染 */}
{
  (function() {
    if(obj1.hasWude) {
      return <p>讲武德的马老师</p>
    }else {
      return <p>不讲武德的马老师</p>
    }
  })()
}
<a
  className="App-link"
  href="https://reactjs.org"
  target="_blank"
  rel="noopener noreferrer"
>
  Learn React
</a>
</header>